<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>index</div>
    <div><a href="./foo.html">使用a标签跳转：跳转到foo</a></div>
    <br />
    <div><a href="./bar.html">使用a标签跳转：跳转到bar</a></div>
    <br />
    <button onclick="navigateFoo()">pushState跳转：跳转到foo</button>
    <button onclick="navigateBar()">pushState跳转：跳转到bar</button>
  </body>
  <script>
    console.log('index-page!!!')
    function navigateFoo() {
      let stateObj = {
        index: 'foo',
      }
      history.pushState(stateObj, 'page-index', './foo.html')
    }

    function navigateBar() {
      let stateObj = {
        index: 'bar',
      }
      history.pushState(stateObj, 'page-index', './bar.html')
    }
    window.addEventListener('popstate', function (state) {
      // alert('触发了popstate！')
      console.log('触发了【【index】】popstate！--state==', history.state)
    })
  </script>
</html>
